<template>
<div class="container">
  <headers title="加票" :refresh="isRefresh" :path="path"></headers>
  <nav class="bar bar-tab">
    <a class="tab-item" v-link="{path: '/home', replace: true}">
      <span class="icon icon2 home-icon"></span>
      <span class="tab-label">首页</span>
    </a>
    <a class="tab-item" v-link="{path: '/chongzhi', replace: true}">
      <span class="icon icon2 chongzhi-icon"></span>
      <span class="tab-label">充值</span>
    </a>
    <a class="tab-item" v-link="{path: '/rule', replace: true}">
      <span class="icon icon2 rule-icon"></span>
      <span class="tab-label">规则</span>
    </a>
  </nav>
  <div class="content">
    <div class="list-block mar-top-0 mar-bottom-10">
      <ul>
        <li class="item-content">
          <div class="item-inner" v-if="taskType == 1">
            <div class="item-title">公众号</div>
            <div class="item-input input-before">
              <input type="text" v-model="taskDetails.publicNumber" readonly>
            </div>
          </div>
          <div class="item-inner" v-if="taskType == 2">
            <div class="item-title">微博名称</div>
            <div class="item-input input-before">
              <input type="text" v-model="taskDetails.name" readonly>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="list-block mar-top-0 mar-bottom-10">
      <ul>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">单价</div>
            <div class="item-input input-before">
              <input type="text" v-model="taskDetails.unitPrice" readonly>
            </div>
            <div class="item-after"><i class="icon-jiapiao icon-coin"></i></div>
          </div>
        </li>
        <li class="item-content" v-if="taskType == 1">
          <div class="item-inner">
            <div class="item-title">置顶加价</div>
            <div class="item-input input-before">
              <select v-model="taskDetails.addPrice" @change="calcTotalGold">
                <option value="{{opt}}" v-for="opt in addPriceData">{{opt}}</option>
              </select>
            </div>
            <div class="item-after"><i class="icon-jiapiao icon-coin"></i></div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">数量</div>
            <div class="item-input input-before">
              <input type="number" v-model="taskDetails.count" @keyup="calcTotalGold">
            </div>
            <div class="item-after">件</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">总价</div>
            <div class="item-input input-before">
              <input type="text" v-if="taskType == 1" v-model="taskDetails.totalGold" readonly>
              <input type="text" v-if="taskType == 2" v-model="taskDetails.totalPrice" readonly>
            </div>
            <div class="item-after"><i class="icon-jiapiao icon-coin"></i></div>
          </div>
        </li>
      </ul>
    </div>
    <div class="list-block mar-top-0 mar-bottom-10" v-if="taskType == 1">
      <ul>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">时间</div>
            <div class="item-input input-before">
              <input type="text" v-model="taskDetails.taskEndDateView" readonly>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="content-block" style="width:100%;margin:50px 0 0 0;">
      <p>
        <a class="button button-fill button-big button-danger" @click="saveTask">
          确认加票
        </a>
      </p>
    </div>
  </div>
</div>
</template>

<script>
import $ from 'zepto'
import Headers from '../components/Headers'

export default {
  ready () {
    $.init()
    for (let i = 0; i <= 100; i++) {
      this.addPriceData.push(i)
    }
    this.taskDetail()
    this.calcTotalGold()
    this.getPath()
  },
  data () {
    return {
      taskDetails: {
        id: 0,
        voteTypeId: '',
        status: 0,
        unitPrice: 0,
        bowlerGold: 0,
        addPrice: 0,
        count: 0,
        totalGold: 0,
        publicNumber: '',
        votedName: '',
        link: '',
        imgUrl: null,
        createDate: 0,
        createDateView: '',
        createCustomerId: 0,
        completeCount: 0,
        receiveCount: 0,
        description: null,
        taskEndDate: 0,
        taskEndDateView: '',
        voteTypeName: null,
        name: '',
        totalPrice: 0,
        customerId: '',
        micrBlogTypeId: ''
      },
      addPriceData: [],
      taskId: this.$route.params.taskId,
      taskType: this.$route.params.type,
      isRefresh: true,
      path: ''
    }
  },
  methods: {
    taskDetail () {
      let url = ''
      if (this.taskType === '1') {
        url = 'http://www.mayishengcai.com/VoteManager/rest/taskDetail/' + this.taskId
      }
      else {
        url = 'http://www.mayishengcai.com/VoteManager/rest/findMicrBlogById/' + this.taskId
      }
      this.$http.jsonp(url).then((data) => {
        this.$set('taskDetails', data.data)
      })
    },
    getPath () {
      if (this.taskType === '1') {
        this.$set('path', '/publish_task')
      }
      else {
        this.$set('path', '/toupiao')
      }
    },
    calcTotalGold () {
      if (!this.taskDetails.count || this.taskDetails.count < 1) {
        this.taskDetails.count = 1
      }
      if (this.taskType === '1') {
        this.taskDetails.totalGold = (parseInt(this.taskDetails.unitPrice, 0) + parseInt(this.taskDetails.addPrice, 0)) * parseInt(this.taskDetails.count, 0)
      }
      else {
        this.taskDetails.totalPrice = parseInt(this.taskDetails.unitPrice, 0) * parseInt(this.taskDetails.count, 0)
      }
    },
    saveTask () {
      let savePath = ''
      let saveData = []
      if (this.taskType === '1') {
        saveData = {
          id: this.taskDetails.id,
          voteTypeId: this.taskDetails.voteTypeId,
          votedName: this.taskDetails.votedName,
          publicNumber: this.taskDetails.publicNumber,
          link: this.taskDetails.link,
          unitPrice: this.taskDetails.unitPrice,
          bowlerGold: this.taskDetails.bowlerGold,
          addPrice: this.taskDetails.addPrice,
          count: this.taskDetails.count,
          totalGold: this.taskDetails.totalGold,
          createCustomerId: this.taskDetails.createCustomerId,
          description: this.taskDetails.description,
          imgUrl: this.taskDetails.imgUrl
        }
        if (this.taskDetails.voteTypeId === '267A386B69A440429F04ECBB2D9C022B') {
          delete saveData.publicNumber
        }
        if (this.inArray(this.taskDetails.voteTypeId, ['D22A31179FA1499B928385F98EFA10B2', 'EAC411DEC3E948C79AD8F0B890A90FE6']) > -1) {
          delete saveData.publicNumber
          delete saveData.votedName
        }
      }
      else {
        saveData = {
          id: this.taskDetails.id,
          name: this.taskDetails.name,
          unitPrice: this.taskDetails.unitPrice,
          count: this.taskDetails.count,
          totalPrice: this.taskDetails.totalPrice,
          customerId: this.taskDetails.customerId,
          micrBlogTypeId: this.taskDetails.micrBlogTypeId,
          description: this.taskDetails.description
        }
      }
      if (this.taskType === '1') {
        savePath = 'http://www.mayishengcai.com/VoteManager/rest/saveTask?' + $.param(saveData, true)
      }
      else {
        savePath = 'http://www.mayishengcai.com/VoteManager/rest/saveMicrBlog?' + $.param(saveData, true)
      }
      $.showIndicator()
      this.$http.jsonp(savePath).then((data) => {
        $.hideIndicator()
        if (data.data.success) {
          $.alert(data.data.message, () => {
            this.$router.replace(this.path)
          })
        }
        else {
          $.alert(data.data.message)
        }
      }, () => {
        $.hideIndicator()
        $.alert('网络异常')
      })
    },
    inArray (needle, array) {
      let index = -1
      let len = array.length
      if (typeof needle === 'string' || typeof needle === 'number') {
        for (let i = 0; i < len; i++) {
          if (needle === array[i]) {
            index = i
            break
          }
        }
      }
      return index
    }
  },
  components: {
    Headers
  }
}
</script>
<style scoped>
.list-block .item-title{min-width:30%}
.item-input.input-before input, select{font-size:14px;}
.icon-jiapiao.icon-coin{
  display:inline-block;
  vertical-align:middle;
  background-size:100% auto;
  background-position:center;
  -webkit-font-smoothing:antialiased;
  -webkit-text-stroke-width:.2px;
  width:18px;
  height:18px;
  background-image:url(../assets/images/public/icon-coin.png);
}
</style>